<template>
  <view class="my-wrapper">
    <!--头-->
    <view class="header">

      <view class="left" @click="handleMyClick">
        <image src="/static/img/logo.png" class="avatar" v-if="needLogin"></image>
        <image :src="userInfo.headimg" class="avatar" v-else></image>
        <view class="info">
          <view class="name">{{ needLogin ? '请先登录' : userInfo.nickname }}</view>
          <!--<view class="vip" v-if="!needLogin">普通会员</view>-->
        </view>
      </view>
      <view class="right">
        <view class="contribution">
          <text>贡献值：</text>
          <text>{{ needLogin ? '' : userInfo.totalMoney }}</text>
        </view>
        <view class="ranking">
          <text>排名：</text>
          <text>{{ needLogin ? '' : userInfo.rank }}</text>
        </view>
      </view>

      <view class="vip-card" @click="handleVipListClick">
        <view class="vip-card-wrapper">
          <view class="left">
            <image class="logo" src="/static/img/qt/vip_card_logo.png"></image>
            <text>VIP会员</text>
          </view>
          <view class="right" @click.stop="handleVipInfoClick">
            <text>会员说明</text>
            <text class="cuIcon-right"></text>
          </view>
        </view>
      </view>

    </view>

    <!--订单-->
    <view class="card">
      <view class="card-header" @click="handleOrderClick(0)">
        <view class="title">我的订单</view>
        <view class="action">
          <text>全部</text>
          <text class="cuIcon-right"></text>
        </view>
      </view>
      <view class="card-wrapper">
        <view class="action" @click="handleOrderClick(1)">
          <view class="action-wrapper">
            <image src="/static/img/qt/my_order_1.png" mode="widthFix" class="logo"></image>
            <view class="title">我的预约</view>
            <view class="cu-tag badge" v-if="orderNum.appointment">{{ orderNum.appointment | badge  }}</view>
          </view>
        </view>
        <view class="action" @click="handleOrderClick(2)">
          <view class="action-wrapper">
            <image src="/static/img/qt/my_order_2.png" mode="widthFix" class="logo"></image>
            <view class="title">进行中</view>
            <view class="cu-tag badge" v-if="orderNum.service">{{ orderNum.service | badge }}</view>
          </view>
        </view>
        <view class="action" @click="handleOrderClick(3)">
          <view class="action-wrapper">
            <image src="/static/img/qt/my_order_3.png" mode="widthFix" class="logo"></image>
            <view class="title">已完成</view>
          </view>
        </view>
      </view>
    </view>

    <!--服务-->
    <view class="service">
      <view class="title">我的服务</view>
      <view class="item" @click="handleMsClick">
        <view class="left">
          <image class="icon" src="/static/img/qt/my_service_ms.png" mode="widthFix"></image>
          <text>我的秒杀</text>
        </view>
        <text class="cuIcon-right"></text>
      </view>
      <view class="item" @click="handleCouponClick">
        <view class="left">
          <image class="icon" src="/static/img/qt/my_service_1.png" mode="widthFix"></image>
          <text>优惠券</text>
        </view>
        <text class="cuIcon-right"></text>
      </view>
      <view class="item" @click="handleFavorClick">
        <view class="left">
          <image class="icon" src="/static/img/qt/my_service_2.png" mode="widthFix"></image>
          <text>店铺收藏</text>
        </view>
        <text class="cuIcon-right"></text>
      </view>
      <view class="item" @click="handleBusinessClick">
        <view class="left">
          <image class="icon" src="/static/img/qt/my_service_3.png" mode="widthFix"></image>
          <text>商家入驻</text>
        </view>
        <text class="cuIcon-right"></text>
      </view>
      <view class="item" @click="handleHelpClick">
        <view class="left">
          <image class="icon" src="/static/img/qt/my_service_4.png" mode="widthFix"></image>
          <text>客服电话</text>
        </view>
        <text class="cuIcon-right"></text>
      </view>
      <view class="item" @click="handleTechnicianClick" v-if="userInfo && userInfo.role == 2">
        <view class="left">
          <image class="icon" src="/static/img/qt/my_service_5.png" mode="widthFix"></image>
          <text>我是技师</text>
        </view>
        <text class="cuIcon-right"></text>
      </view>
      <view class="item" @click="handleOfflineTradingClick">
        <view class="left">
          <image class="icon" src="/static/img/qt/my_service_6.png" mode="widthFix"></image>
          <text>到店支付</text>
        </view>
        <text class="cuIcon-right"></text>
      </view>
    </view>

    <!--推荐-->
    <view class="hot-sell">
      <view class="title">
        <view class="text">热卖推荐</view>
      </view>

      <view class="list">
        <view class="item" v-for="(item,i) in list" :key="i" @click="handleActivityClick(item)">
          <image class="cover" :src="item.cover"></image>
          <view class="name text-cut2">{{ item.goodsName }}</view>
          <view class="money">
            <text>￥</text>
            <text class="num">{{ item.price }}</text>
          </view>
        </view>
      </view>

      <list-loading v-if="loading"/>
      <list-empty v-if="!loading && (!list || list.length == 0)"/>
      <list-load-over v-else-if=" loadOver"/>
    </view>
  </view>
</template>

<script>
import Api from "@/utils/Api";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";

export default {
  components: {ListLoadOver, ListEmpty, ListLoading},
  name: "my",
  data() {
    return {
      needLogin: true,
      userInfo: null,
      list: [],
      page: 0,
      loading: false,
      loadOver: false,
      orderNum: {appointment: 0, service: 0, finish: 0}
    }
  },
  onShow(){
    let needRefreshOrderNum = uni.getStorageSync("needRefreshOrderNum");
    if(needRefreshOrderNum == true){
      this.getOrderNum();
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.getUserInfo(() => {
      this.clear();
      this.getList();
      this.getOrderNum();
    });
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    this.getList();
  },
  methods: {
    //region 跳转
    handleMsClick() {
      uni.navigateTo({url: `/pages/index/my/ms/list/index`})
    },
    handleVipInfoClick() {
      uni.navigateTo({url: `/pages/index/my/vip/info/index`})
    },
    handleVipListClick() {
      uni.navigateTo({url: `/pages/index/my/vip/list/index`})
    },
    handleCouponClick() {
      uni.navigateTo({url: `/pages/index/my/coupon/index`})
    },
    handleFavorClick() {
      uni.navigateTo({url: `/pages/index/my/shop-favor/index`})
    },
    handleBusinessClick() {
      uni.navigateTo({url: `/pages/index/my/join/index`})
    },
    handleHelpClick() {
      uni.navigateTo({url: `/pages/index/my/help/index`})
    },
    handleTechnicianClick() {
      uni.navigateTo({url: `/pages/index/my/technician/index/index`})
    },
    handleOrderClick(orderType) {
      uni.navigateTo({url: `/pages/index/my/order/index/index?type=${orderType}`})
    },
    handleOfflineTradingClick() {
      uni.navigateTo({url: `/pages/index/my/offline-trading/index`})
    },
    //endregion
    getOrderNum() {
      Api.getOrderNum().then(res => {
        this.orderNum = res;
        uni.setStorageSync("needRefreshOrderNum",false)
      })
    },
    getUserInfo(callback) {
      this.req.getUserInfoCacheCheckMobile().then(res => {
        this.needLogin = false;
        this.userInfo = res;

        typeof callback === 'function' && callback();
      });

    },
    handleMyClick() {
      if (this.needLogin)
        this.getUserInfo();
    },
    refresh() {
      this.req.getUserInfoCheckMobile().then(res => {
        this.needLogin = false;
        this.userInfo = res;
        this.clear();
        this.getList();
        this.getOrderNum();
      });
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      Api.getGoods({top: 1, page: ++this.page}).then(res => {
        this.list = res;
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    },

    handleActivityClick(activity) {
      uni.navigateTo({url: `/pages/shop/goods/detail?id=${activity.id}`})
    },
    handleLoginTrigger() {
      console.log("login result")
      this.getUserInfo(this.getOrderNum);
    },
  },
  filters: {
    badge(val) {
      if (!val) return '';
      else if (val > 99) return '99+'
      return val;
    },
  },
}
</script>

<style scoped lang='scss'>
.header {
  background-color: #262A3D;
  height: r(300px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #FFFFFF;
  position: relative;

  & > .left {
    padding-left: r(27px);
    display: flex;

    .avatar {
      height: r(97px);
      width: r(97px);
      border-radius: 50%;
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      color: white;
      margin-left: r(25px);

      .name {
        font-size: r(40px);
      }

      //
      //.vip {
      //  font-size: r(20px);
      //  font-weight: 400;
      //  border-radius: r(50px);
      //  border: 1px solid #D7D7D7;
      //  padding: r(0 10px);
      //}
    }
  }

  .right {

    .contribution {
      background: linear-gradient(90deg, #FFF26E, #FFD025);
      border-radius: r(25px 0 0 25px);
      padding: r(15px 44px 15px 30px);
      font-size: r(22px);
      color: #CA9300;
    }

    .ranking {
      padding-right: r(44px);
      text-align: right;
      font-size: r(22px);
    }
  }

  .vip-card {
    position: absolute;
    bottom: r(-46px);
    left: 0;
    right: 0;
    padding: r(0 18px);

    .vip-card-wrapper {
      background: linear-gradient(to right, #F9BF8B 0%, #FFDDBF 100%);
      border-radius: r(10px);
      display: flex;
      justify-content: space-between;
      padding: r(27px 36px);
      align-items: center;
      font-size: r(28px);
      color: #7B5533;

      .left {
        display: flex;
        align-items: center;

        .logo {
          height: r(40px);
          width: r(40px);
          margin-right: r(15px);
        }

      }
    }
  }
}

.card {
  margin: r(66px 25px 25px 25px);
  background-color: white;
  border-radius: r(20px);

  .card-header {
    padding: r(24px 18px);
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #F5F5F5;
    align-items: center;

    .title {
      font-size: r(30px);
      font-weight: 500;
      color: #666666;
    }

    .action {
      font-size: r(26px);
      color: #666666;
    }
  }

  .card-wrapper {
    display: flex;

    .action {
      flex: 1;
      padding: r(30px 0);
      display: flex;
      justify-content: center;
      align-items: center;

      .action-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: r(112px);

        .logo {
          width: r(42px);
        }

        .title {
          margin-top: r(20px);
        }
      }

    }
  }
}

.service {
  background-color: white;
  padding: r(20px 0);
  margin-bottom: r(20px);

  .title {
    margin-top: r(10px);
    margin-left: r(30px);
    font-size: r(30px);
    font-weight: 500;
    color: #313131;
  }

  .item {
    padding: r(30px);
    display: flex;
    justify-content: space-between;
    align-items: center;

    & + .item {
      border-top: 1px solid #f5f5f5;
    }

    .cuIcon-right {
      color: #B5B5B5;
    }

    .left {
      display: flex;
      align-items: center;
      font-size: r(28px);
      color: #4F4F4F;

      .icon {
        width: r(30px);
        margin-right: r(20px);
      }
    }
  }
}

.hot-sell {
  background-color: white;
  padding: r(40px 0);
  overflow-x: hidden;

  .title {
    margin-bottom: r(40px);
    font-size: r(28px);
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    &::after, &::before {
      content: '';
      position: absolute;
      width: r(40px);
      height: 1px;
      background-color: #f0f0f0;
    }

    &::after {
      left: 50%;
      margin-left: r(80px);
    }

    &::before {
      right: 50%;
      margin-right: r(80px);
    }

  }

  .list {
    $gap: r(30px);
    width: calc(100% + #{$gap});
    padding: r(0 30px);
    display: flex;
    flex-wrap: wrap;

    .item {
      width: calc(50% - #{$gap});
      margin-right: $gap;
      margin-top: $gap;

      .cover {
        height: r(330px);
        border-radius: r(12px);
      }

      .name {
        margin-top: r(20px);
        margin-bottom: r(20px);
        font-size: r(28px);
        color: #333333;
      }

      .money {
        font-size: r(20px);
        font-weight: 500;
        color: #E83E3C;

        .num {
          font-size: r(30px);
        }
      }
    }
  }
}

</style>